import { Box } from '@chakra-ui/react';
import React from 'react';
import ReactFlow, { Handle, Position, Background, Controls, MiniMap } from 'reactflow';

const CustomNode = ({ data }: any) => {
  return (
    <div className="px-4 py-2 shadow-md rounded-md bg-white border-2 border-stone-400 w-4">
      <div className="font-bold">{data.label}</div>
      <Handle type="source" position={Position.Top} id="top" className="w-4 h-4 !bg-teal-500" />
      <Handle type="source" position={Position.Right} id="right" className="w-4 h-4 !bg-teal-500" />
      <Handle
        type="source"
        position={Position.Bottom}
        id="bottom"
        className="w-4 h-4 !bg-teal-500"
      />
      <Handle type="source" position={Position.Left} id="left" className="w-4 h-4 !bg-teal-500" />
    </div>
  );
};

const nodeTypes = {
  custom: CustomNode
};

const initialNodes = [
  {
    id: '1',
    type: 'custom',
    data: { label: '节点 1' },
    position: { x: 250, y: 200 }
  },
  {
    id: '2',
    type: 'custom',
    data: { label: '节点 2' },
    position: { x: 100, y: 400 }
  }
];

const initialEdges = [
  { id: 'e1-2', source: '1', target: '2', sourceHandle: 'bottom', targetHandle: 'top' }
];

const ReactFlowDemo = () => {
  return (
    <Box style={{ width: '100%', height: '100vh' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} nodeTypes={nodeTypes} fitView   minZoom={0.1}
        maxZoom={1.5}>
        <Background />
        {/* <Controls /> */}
        {/* <MiniMap /> */}
      </ReactFlow>
    </Box>
  );
};

export default ReactFlowDemo;
